import QtQuick 2.0

/* 自定义组件 带标题的文本输入框 */
Item {
    width: 50
    height: 30

    property alias titleText : title.text // 标题文本
    property alias titleWidth: title.width // 标题宽度

    property color textColor: "#FFFFFF" // 文本颜色
    property int textSize : 20 // 文本大小

    property alias inputBackColor  : inputRect.color // 文本输入框的背景色
    property alias inputBorderColor: inputRect.border.color // 文本输入框的边框颜色
    property alias inputBorderWidth: inputRect.border.width // 文本输入框的边框宽度

    property alias inputText: textInput.text // 文本输入框的文本
    property alias inputReadOnly: textInput.readOnly // 文本输入框的只读属性
    property alias inputValidator: textInput.validator // 文本输入框的文本验证器

    Text {
        id: title
        height: parent.height
        anchors.left: parent.left
        text: qsTr("title:")
        color: textColor
        font.pixelSize: textSize

        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
    }

    Rectangle {
        id: inputRect
        width: parent.width - title.width
        height: parent.height
        anchors.left: title.right
        color: "#DDDDDD"
        border.width: 1
        border.color: "#000000"

        TextInput {
            id: textInput
            anchors.fill: parent
            font.pixelSize: textSize
            color: textColor
            clip: true
            readOnly: false
            verticalAlignment: TextInput.AlignVCenter
            selectByMouse: true
        }
    }
}
